import React, { useCallback } from 'react'
import { View, Text, SectionList } from 'react-native'

export default function IndexSectionlist() {
  const handleRenderItem = useCallback(
    ({item}) => {
      return (
        <View>
          <Text>{item}</Text>
        </View>
      )
    },
    [],
  )

  const handleRenderSectionHeader = useCallback(
    ({section: {title}}) => {
      return (
        <View>
          <Text>{title}</Text>
        </View>
      )
    },
    [],
  )

  const handleKeyExtractor = useCallback(
    (item, index) => index + item,
    [],
  )

  return (
    <SectionList
      sections={[
        {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
      ]}
      renderItem={handleRenderItem}
      renderSectionHeader={handleRenderSectionHeader}
      keyExtractor={handleKeyExtractor}
    >
      <Text>hello world</Text>
    </SectionList>
  )
}
